<#assign c = JspTaglibs["http://java.sun.com/jsp/jstl/core"] >
<#assign fmt = JspTaglibs["http://java.sun.com/jsp/jstl/fmt"] >
<#assign sp = JspTaglibs["http://www.springframework.org/tags"] >
<!-- <div>
<table>
	<tr style="padding-left: 3px;">
		<th><@sp.message code="txt.batchNo"/>:</th><td><input type="text" [(ngModel)]="queryParam.batchNo" /></td>
	</tr>
	<tr>
	<th colspan="6" style="text-align: left; padding-left: 20px;"><button class="btn btn_main" (click)="searchResultSum()"><@sp.message code="txt.search"/></button> </th>
	
	</tr>
</table>

</div> -->
<div *ngIf="result">
	<pagination-controls id="lTablePg" (pageChange)="changeResultSumPage($event)"></pagination-controls>
	<table class="resultTable"><caption><@sp.message code="txt.ledgerCheckSum"/></caption>
		<tr>
			<th><@sp.message code="txt.dataDate"/></th>
			<th><@sp.message code="txt.accountCode"/></th><th><@sp.message code="txt.ccyCode"/></th>
			<th><@sp.message code="txt.bookedAmount"/></th><th><@sp.message code="txt.ledgerAmount"/></th>
			<th><@sp.message code="txt.amountDiff"/></th><th><@sp.message code="txt.percentDiff"/></th>
		</tr>
		<tr *ngFor="let sum of result.datas | paginate: { id: 'lTablePg', itemsPerPage: queryParam.pageSize, currentPage: queryParam.pageNumber, totalItems: result.recordCount}" >
			<td>{{sum.dataDate}}</td>
			<td>{{sum.accountCode}}</td><td>{{sum.ccyCode}}</td>
			<td>{{sum.bookedAmount}}</td><td>{{sum.ledgerAmount}}</td>
			<td (click)="getDetailsBySum(sum)" style="cursor: pointer;">{{sum.amountDiff}}</td><td>{{sum.percentDiff}}%</td>
		</tr>
	</table>
</div>

<div class="example-wrapper">
	<p-dialog header="<@sp.message code='txt.ledgerCheckDtl'/>" [(visible)]="dtlWindowOpened" modal="modal">
	<div *ngIf="!nodeDetailOpened">
		<pagination-controls id="dtlTablePg" (pageChange)="p = $event"></pagination-controls>
		<table class="resultTable">
			<caption><@sp.message code="txt.ledgerCheckActDtl"/></caption>
			<tr>
				<th><@sp.message code="txt.accountCode"/></th>
				<th><@sp.message code="txt.nodeName"/></th>
				<th><@sp.message code="txt.ccyCode"/></th>
				<th><@sp.message code="txt.srcSystem"/></th>
				<th><@sp.message code="txt.bookedAmount"/></th>
				<th><@sp.message code="txt.ledgerAmount"/></th>
				<th><@sp.message code="txt.amountDiff"/></th>
				<th><@sp.message code="txt.percentDiff"/></th>
			</tr>
			<tr *ngFor="let dtl of details | paginate: {id: 'dtlTablePg', itemsPerPage: 20, currentPage: p }">
				<td>{{dtl.accountCode}}</td>
				<td (click)="getDetailsByNode(dtl)" style="cursor: pointer;">>{{dtl.nodeCode}} - {{dtl.nodeName}}</td>
				<td>{{dtl.ccyCode}}</td>
				<td>{{dtl.srcSystem}}</td>
				<td>{{dtl.bookedAmount}}</td>
				<td>{{dtl.ledgerAmount}}</td>
				<td>{{dtl.amountDiff}}</td>
				<td>{{dtl.percentDiff}}%</td>
			</tr>
		</table>
	</div>
	<div *ngIf="nodeDetailOpened">
		<pagination-controls id="nddtlTablePg" (pageChange)="p1 = $event"></pagination-controls>
		<table class="resultTable">
			<caption><@sp.message code="txt.nodeDetailTitle"/></caption>
			<tr>
				<th><@sp.message code="txt.accountCode"/></th>
				<th><@sp.message code="txt.nodeName"/></th>
				<th><@sp.message code="txt.ccyCode"/></th>
				<th><@sp.message code="txt.projectName"/></th>
				<th><@sp.message code="txt.srcSystem"/></th>
				<th><@sp.message code="txt.bookedAmount"/></th>
				<th><@sp.message code="txt.ledgerAmount"/></th>
				<th><@sp.message code="txt.amountDiff"/></th>
				<th><@sp.message code="txt.percentDiff"/></th>
			</tr>
			<tr *ngFor="let nddtl of nodeDetails | paginate: {id: 'nddtlTablePg', itemsPerPage: 20, currentPage: p1 }">
				<td>{{nddtl.accountCode}}</td>
				<td>{{nddtl.nodeCode}} - {{nddtl.nodeName}}</td>
				<td>{{nddtl.ccyCode}}</td>
				<td style="width: 100px;">{{nddtl.itemName}}</td>
				<td>{{nddtl.srcSystem}}</td>
				<td>{{nddtl.bookedAmount}}</td>
				<td>{{nddtl.ledgerAmount}}</td>
				<td>{{nddtl.amountDiff}}</td>
				<td>{{nddtl.percentDiff}}%</td>
			</tr>
		</table>
		<button class="btn btn_main" (click)="closeNodeDetails('cancel')"><@sp.message code="txt.back"/></button>
	</div>
	</p-dialog>
</div>